<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button class="fr" type="primary" @click="submit" :loading="submitLoading">提交所有数据 </el-button>
    <el-select class="fr" style="width: 140px; margin-right: 5px" filterable v-model="reason" placeholder="选择入库原因"
      clearable>
      <el-option v-for="(item, index) in reasonOptions" :key="index" :value="item.value" :label="item.label">
      </el-option>
    </el-select>
    <div class="filter-container">
      <el-select class="filter-item" style="width: 130px" @change="whChange" v-model="data.warehouse" placeholder="选择仓库"
        :disabled="list.length > 0">
        <el-option v-for="i in whOptions" :key="i.value" :label="i.label" :value="i"> </el-option>
      </el-select>
      <el-select class="filter-item" style="width: 180px" filterable remote :remote-method="getMatOptions"
        v-model="data.material" placeholder="输入料号搜索" clearable>
        <el-option v-for="i in materialOptions" :key="i.value" :label="i.label" :value="i"></el-option>
      </el-select>
      <el-select class="filter-item" style="width: 140px" filterable v-model="data.stock" placeholder="选择库位" clearable>
        <el-option v-for="i in stockOptions" :key="i.value" :label="i.label" :value="i"></el-option>
      </el-select>
      <el-input-number style="width: 160px" placeholder="入库数量" class="filter-item" v-model="data.qty">
      </el-input-number>
      <el-input v-model="data.code" style="width: 100px" class="filter-item" placeholder="条码录入"></el-input>
      <el-input v-model="data.batch" style="width: 100px" class="filter-item" placeholder="批次"></el-input>
      <!-- <el-date-picker class="filter-item" style="width: 185px;" v-model="data.lot_date_code" type="date"
        format="yyyyMMdd" value-format="yyyyMMdd" placeholder="批次日期码（非必填）" clearable>
      </el-date-picker> -->
      <el-button class="filter-item" type="success" plain @click="addItem">增加</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns">
      <template v-slot:operation="v">
        <a href="#" class="text-red" @click.prevent="removeItem(v.row, v.$index)">移除</a>
      </template>
    </z-table>

  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'warehousing',
  data: function () {
    return {
      pageLoading: false,
      submitLoading: false,
      whOptions: [],
      stockOptions: [],
      materialOptions: [],
      reasonOptions: [],
      reason: '',
      tableProps: {
        border: true,
        opsColWith: 70,
        hideOperations: false,
      },
      columns: [
        { title: '仓库', key: 'warehouse', width: 140 },
        { title: '库位', key: 'stock_code', width: 120 },
        { title: '物料', key: 'key_part_name' },
        { title: '条码', key: 'material_barcode' },
        { title: '批次', key: 'batch' },
        { title: '数量', key: 'qty', width: 100 },
        // { title: '单位', key: 'unit_name', width: 100 },单位
      ],
      data: {},
      list: [],
    }
  },
  methods: {
    removeItem(r, i) {
      this.list.splice(i, 1)
    },
    whChange(v) {
      console.log(v)
      if (v) {
        this.$request(this.$api.stock + 'getbywhid', { id: v.value }).then((r) => {
          this.stockOptions = this.arrayOptions(r, 'id', ['stock_code'])
        })
      } else {
        this.stockOptions = []
      }
    },
    submit() {
      console.log(this.list)
      if (this.list.length == 0) {
        this.$message({
          message: '没有需要提交的数据',
          type: 'error',
        })
        return
      }
      if (!this.reason) {
        this.$message({
          message: '没有选择入库原因',
          type: 'error',
        })
        return
      }
      console.log(this.data.warehouse.value, this.reason, this.list)
      this.submitLoading = true
      this.$request(
        this.$api.wareSubmit,
        {
          wh_id: this.data.warehouse.value,
          order_no: '',
          reason: this.reason,
          _list: JSON.stringify(this.list),
        },
        'post',
      )
        .then((r) => {
          this.submitLoading = false
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.list = []
          this.reason = ''
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
    addItem() {
      if (!this.data.warehouse) {
        this.$message({
          message: '没有选择仓库',
          type: 'error',
        })
        return
      }
      if (!this.data.material) {
        this.$message({
          message: '没有选择物料',
          type: 'error',
        })
        return
      }
      if (!this.data.code) {
        this.$message({
          message: '条码录入不能为空',
          type: 'error',
        })
        return
      }
      if (!this.data.batch) {
        this.$message({
          message: '批次不能为空',
          type: 'error',
        })
        return
      }
      console.log(this.data)
      this.list.push({
        warehouse_id: this.data.warehouse.value,
        warehouse: this.data.warehouse.label,
        material_id: this.data.material.value,
        key_part_no: this.data.material.key_part_no,
        key_part_name: this.data.material.label,
        stock_id: this.data.stock ? this.data.stock.value : '',
        stock_code: this.data.stock ? this.data.stock.label : '',
        // unit_name: this.data.material.unit_name, 单位
        material_barcode: this.data.code,
        batch: this.data.batch,
        qty: this.data.qty,
      })
      this.data = { warehouse: this.data.warehouse }
    },
    getMatOptions(query) {
      console.log(query)
      if (query) {
        this.$request(this.$api.mat + 'getmatandsku', { queryString: query, is_vaild: 'Y' })
          .then((r) => {
            console.log(r)
            var tmp = r.map((i) => {
              return {
                value: i.id,
                label: i.key_part_no + ' ' + i.key_part_name,
                // unit_name: i.unit_name,单位
                key_part_no: i.key_part_no,
              }
            })
            this.materialOptions = tmp
          })
          .catch(() => {})
      } else {
        this.materialOptions = []
      }
    },
  },
  created: function () {
    this.$request(this.$api.warehouse + 'getlist', { curPage: 1, pageSize: 999, warehouse_type: '0' }).then((r) => {
      this.whOptions = this.arrayOptions(r.list, 'id', ['warehouse_code', 'warehouse_name'])
    })
    // this.$request(this.$api.dictionary + 'getchildren', { parentType: 'erp_reason' }).then((r) => {
    //   console.log(r)
    //   this.reasonOptions = _.drop(r)
    // })
    this.reasonOptions = [
      { value: '正常入库', label: '正常入库' },
      { value: '生产退料', label: '生产退料' },
      { value: '其他', label: '其他' },
    ]
  },
}
</script>
<style scoped>
</style>
